<div>
    <div class="lineChart-wrap">
        <nz-card class="card" [nzExtra]="lstqCardTemplate">
            <div *ngIf="chartType===0; else tableBox" echarts [options]="historyOpt" 
            [merge]="historyOptChange" (chartInit)="onChartInit($event)"
             style="height: 291px;"></div>
            <ng-template #tableBox>
                <nz-table #table nzSize="middle" nzBordered [nzData]="historyOptChange.xAxis.data"  [nzScroll]="{ y: '300px',x:'100%' }"
                [nzFrontPagination]="false" [nzShowPagination]="false">
                    <thead>
                        <tr>
                            <th nzWidth="150px" nzLeft="0">时间</th>
                            <th  nzWidth="150px" *ngFor="let item of historyOptChange.series">{{item.name}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let time of table.data">
                            <td nzWidth="150px" nzLeft="0">{{ time }}</td>
                            <td  nzWidth="150px" *ngFor="let val of tableData[time]">{{val}}</td>
                        </tr>
                    </tbody>
                </nz-table>
            </ng-template>
        </nz-card>
    </div>
    <ng-template #lstqCardTemplate>
        <div class="card-search-wrap">
            <form nz-form [nzLayout]="'inline'" [formGroup]="historyForm">
                <nz-form-item class="trId-select">
                    <!--<nz-form-label>渠道</nz-form-label>-->
                    <nz-form-control>
                        <nz-select formControlName="trId" [nzAllowClear]="false" nzPlaceHolder="渠道" (ngModelChange)="onQueryHistory()">
                            <nz-option *ngFor="let opt of channelList" [nzLabel]="opt.name" [nzValue]="opt.id"></nz-option>
                        </nz-select>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <!--<nz-form-label>历史年</nz-form-label>-->
                    <nz-form-control>
                        <nz-select nzAllowClear nzPlaceHolder="历史年" formControlName="yearStr" nzMode="multiple" style="min-width: 105px" (ngModelChange)="onQueryHistory()">
                            <nz-option *ngFor="let option of historyYearList" [nzLabel]="option" [nzValue]="option"></nz-option>
                        </nz-select>
                    </nz-form-control>
                </nz-form-item>

                <nz-form-item>
                    <!--<nz-form-label>时间</nz-form-label>-->
                    <nz-form-control>
                        <nz-date-picker style="width: 105px;" [nzDisabledDate]="disabledHistoryStartDate" nzFormat="MM-dd" formControlName="startDateStr" (ngModelChange)="onStartHistoryChange($event)" (nzOnOpenChange)="handleStartHistoryOpenChange($event)">

                        </nz-date-picker>
                        至
                        <nz-date-picker style="width: 105px;"  (ngModelChange)="onQueryHistory()" [nzDisabledDate]="disabledHistoryEndDate" nzFormat="MM-dd" formControlName="endDateStr" [nzOpen]="endHistoryOpen" (ngModelChange)="onEndHistoryChange($event)" (nzOnOpenChange)="handleEndHistoryOpenChange($event)">
                        </nz-date-picker>

                    </nz-form-control>
                </nz-form-item>

                <nz-form-item>
                    <nz-form-control>
                        <i nz-icon nzType="search" class="search-icon" nzTheme="outline" (click)="onQueryHistory()"></i>
                    </nz-form-control>
                </nz-form-item>
                <button nz-button nzType="primary" (click)="changeChartType()">{{chartType===0?'切换至表格':"切换至折线图"}}</button>
            </form>
            
        </div>
    </ng-template>
</div>